<template>
	<div class="base">
		<Header></Header>
		<div class="main-content" ref="scrollBody" @scroll="debouncedScroll">
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="keepAlive">
						<component :is="Component" />
					</keep-alive>
				</transition>
			</router-view>
		</div>
<!--		<video id="video" poster="https://sekiro.oss-cn-beijing.aliyuncs.com/static/images/sakura_poster.jpg" autoplay="" loop="" muted="">-->
<!--			<source src="" type="video/mp4">-->
<!--		</video>-->
	</div>
</template>
<script setup>
import Header from "../components/Header.vue"
import {computed} from "vue";
import {useStore} from "vuex";
import {useRoute, onBeforeRouteUpdate} from "vue-router";
const store = useStore()
store.commit('setUserinfo')

const route = useRoute();
const keepAlive = computed(() => {
	return store.state.aliveList.map((item) => item.name)
})
// 设置标签
const setAlive = (route) => {
	const isExist = store.state.aliveList.some((item) => {
		return item.fullPath === route.fullPath;
	});
	if (!isExist) {
		store.commit("setAliveItem", {
			name: route.name,
			title: route.meta.title,
			fullPath: route.fullPath,
		});
	}
};
setAlive(route);
onBeforeRouteUpdate((to) => {
	setAlive(to);
});

</script>
<style lang="scss">
.base {
	height: 100%;
	width: 100%;
}
#video {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -3;
	top: 0;
	object-fit: fill;
	display: block;
}
.main-content {
	width: 100%;
	height: 100%;
	overflow: hidden;
	//background-image: url("https://sekiro.oss-cn-beijing.aliyuncs.com/static/game/nier2b.jpg");
	background-position: center center;
	background-size: cover;
	.body {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		//scroll-behavior: smooth;
		.container {
			max-width: 1300px;
			min-height: calc(100vh - 296px);
			margin: 0 auto;
		}
	}
}
@media screen and (max-width: 1300px) {
	.main-content .body .container {
		width: 96%;
	}
}
</style>
